<template>
    <div class="footer">
			<ul>
				<img class="tab_back" src="http://qnkf.laigl.com/mobilepng/tabbar.png" alt="">
				<!-- <img class="tab_back" src="../assets/img/tabbar.png" alt=""> -->
				<li  @click="changeindex(1,'/index')" :class="curindex=='1'?'footer_on':''">
				    <i class="iconfont  icon-shouye"></i>
				</li>
				<li  @click="changeindex(2,'/questions')" :class="curindex=='2'?'footer_on':''">
				    <i class="iconfont  icon-wenjuantiaocha"></i>
				</li>
				<li  @click="changeindex(3,'/solution')" :class="curindex=='3'?'footer_on':''">
					<img class="solution_pic"  src="http://qnkf.laigl.com/mobilepng/solution.png" alt="">
				</li>
				<li @click="changeindex(4,'/action')" :class="curindex=='4'?'footer_on':''">
				    <i class="iconfont  icon-wenjian"></i>
				</li>
				<li  @click="changeindex(5,'/mine')" :class="curindex=='5'?'footer_on':''">
				    <i class="iconfont  icon-wodexuanzhong"></i>
				</li>
				<ul class="tab_text">
					<li @click="changeindex(1,'/index')" :class="curindex=='1'?'footer_on':''"><span>首页</span></li>
					<li @click="changeindex(2,'/questions')" :class="curindex=='2'?'footer_on':''"><span>认证题库</span></li>
					<li @click="changeindex(3,'/solution')" :class="curindex=='3'?'footer_on':''"><span>解决方案</span></li>
					<li @click="changeindex(4,'/action')" :class="curindex=='4'?'footer_on':''"><span>动作库</span></li>
					<li @click="changeindex(5,'/mine')" :class="curindex=='5'?'footer_on':''"><span>我的</span></li>
				</ul>
			</ul>
    </div>
</template>
<script>
export default {
    data(){
				return{
					curindex:'3'
				}
		},
		created() {
			this.curindex = sessionStorage.getItem('index')||1
		},
		methods:{
			changeindex(index,router){
				if(this.curindex==index){
					return
				}
				sessionStorage.setItem('index',index)
				this.$router.push({
					path:router
				})
			}
		}
}
</script>
<style lang="less" scoped>
.footer_on{
  color:#000!important;
	font-weight: 700;
}
.footer{
    position: fixed;
		z-index: 9999;	
    bottom:0;
    width: 100%;
    height: 5rem;
		box-sizing: border-box;
		color:#aaa;
		ul{
			position: relative;
			height: 5rem;
			.tab_text{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100vw;
				box-sizing: border-box;
				height: 2rem;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				li{
					width: 20vw;
					text-align: center;
					color: #C8C9CC;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0;
					span{
						font-size: 1rem;
						display: inline-block;
					}
				}
			}
		}
		.tab_back{
			position: absolute;
			width: 100%;
			height: 5.1rem;
			object-fit: fill;
		}
		.solution_pic{
			position: absolute;
			width: 3rem;
			height: 3rem;
			top: 1vh;
			left: 4.5vw;
		}
		li:nth-child(4){
			// margin-left: -2px;
			p{
				bottom: -3.6vh;
			}
		}
    li{
				padding-top: 1.5rem;
				width: 20%;
				text-align: center;
				height: 30%;
				display: inline-block;
				position: relative;
				z-index: 9999;
				transition: all .5s;
				i{
					font-size: 1.5rem;
				}
    }
}
</style>
